<template>
    <section class="special_cenue">
	  <el-form-item label="按频率控制">
			 <el-input type="input" v-model="form.frequency" style="width: 120px;" ></el-input>
			<el-select v-model="form.frequencyUnit" placeholder="请选择">
					  <el-option  label="次/小时" value=1></el-option>
					  <el-option  label="次/天" value=2></el-option>
				      <el-option  label="次/月" value=3></el-option>
			</el-select>
		</el-form-item>
		
		<el-form-item label="按流量控制">
			 <el-input type="input" v-model="form.flow" style="width: 120px;" ></el-input>
			<el-select v-model="form.flowUnit" placeholder="请选择">
					  <el-option  label="M/小时" value=1></el-option>
					  <el-option  label="M/天" value=2></el-option>
				      <el-option  label="M/月" value=3></el-option>
			</el-select>
		</el-form-item>
		
		
        <el-form-item label="访问时间段">
					<el-radio-group v-model="form.timeTpye">
				      <el-radio class="block_radio" label="">不限</el-radio>
				      <el-radio class="block_radio"  label=1>每天</el-radio>
				      <el-radio class="block_radio"   label=2>每周</el-radio>
				      <el-radio  class="block_radio"  label=3>每月</el-radio>
				    </el-radio-group>
				    
				    <div class="everyDay"><!--每天几点-->
				    	<el-time-select
						    placeholder="起始时间"
						    v-model="formExtra.startTime"
						    :picker-options="{
						      start: '00:00',
						      step: '00:15',
						      end: '24:00',
						    }">
						</el-time-select>
						至
						<el-time-select
						    placeholder="结束时间"
						    v-model="formExtra.endTime"
						    :picker-options="{
						      start: '00:00',
						      step: '00:15',
						      end: '24:00',
						      minTime: form.startTime
						    }">
					    </el-time-select>  
				    </div>
				     
				    <div class="everyWeek"><!--每周星期几-->
				    	<el-checkbox-group v-model="formExtra.everyWeek">
						  <el-checkbox class="box_checkbox" v-for="(item,index) in everyWeekCheckBox" :label="item.name" :name="item.name" :key="index">{{item.label}}</el-checkbox>
						</el-checkbox-group>
				    </div>
				    
				    <div class="everyMonth"><!--每月几号-->
				    	<el-popover
						  placement="right"
						  width="400"
						  v-model="everyMonthVisible"
						  trigger="click">
						 <el-checkbox-group v-model="everyMonth">
						  <el-checkbox class="everyMonth_checkbox" style="width: 60px;margin:10px 0 0 30px;" v-for="(item,index) in everyMonthCheckBox" :label="item.name" :name="item.name" :key="index">{{item.label}}</el-checkbox>
							<el-button type="primary"  size="mini" @click="chooseEveryMonth">确定</el-button>
						 </el-checkbox-group>
						 <el-button slot="reference">
						 	 <span class="everyMonth_span" v-for="(item ,index) in formExtra.everyMonth" :key="index">
						 		<i class="el-icon-circle-close-outline"></i>
						 		{{item}}
						 </span>
						 </el-button>
						</el-popover>
				    </div>
				    
		</el-form-item>
    </section>
</template>

<script>
    import {
    	everyMonthCheckBoxJson,
    	everyWeekCheckBoxJson,
    } from "./js_css_img/jsonDiy"
    export default {
    	props:{
    		timeSubmit:Boolean,
    	},
        data() {
          return {
          	everyMonth:[],
          	everyMonthVisible:false,
          	form:{
          			frequency:'',
					frequencyUnit:'',
					flow:'',
					flowUnit:'',
					timeTpye:'',
					timeValue:""
          	},
          	formExtra:{
          		everyWeek:[],
          		everyMonth:[],
          		endTime:'',
          		startTime:'',
          	},
          	everyWeekCheckBox:everyWeekCheckBoxJson,
          	everyMonthCheckBox:everyMonthCheckBoxJson
          };
        },
        methods: {
        	    chooseEveryMonth(){
        			console.log(this.form.everyMonth);
        			this.formExtra.everyMonth = this.everyMonth;
        			this.everyMonthVisible=false;
        		},
        },
        watch:{
        	timeSubmit(newVal){
        			console.log(newVal);
        			console.log(this.formExtra);
        			switch (this.form.timeTpye){
        				case '1':
        				this.form.timeValue=this.formExtra.startTime +','+this.formExtra.endTime;
        				break;
        				case '2':
        				this.form.timeValue=this.formExtra.everyWeek.join();
        				break;
        				case '3':
        				this.form.timeValue=this.formExtra.everyMonth.join();
        				break;
        				default:
        					break;
        			}
        			this.$emit("outPutForm",this.form);
        		
        	}
        }
  };
</script>

<style scoped="scoped">
 .special_cenue .block_radio{
 	display: block;
 	margin: 0 0 25px 0;
 }
 .special_cenue .el-radio+.el-radio{
 	/*margin-left: unset;*/
 }
 .special_cenue .everyDay{
 	    position: absolute;
	    top: 25px;
	    left: 100px;
 }
 .special_cenue .everyWeek{
 	 position: absolute;
    top: 65px;
    left: 95px;
 }
    
  .special_cenue .everyMonth_span{
  	    position: relative;
    border: 1px solid #dcdfe6;
    padding: 5px;
    margin: 0 5px;
  }
  
  
  .special_cenue .everyMonth_span .el-icon-circle-close-outline{
  	    position: absolute;
    top: -5px;
    right: -5px;
  }
 .special_cenue label.el-checkbox.everyMonth_checkbox{
 	width: 60px;
 	margin-left: 30px;
 }
  .special_cenue .everyMonth{
  	position: absolute;
    top: 115px;
    left: 100px;
  }
</style>